<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <link rel="stylesheet" href="../assets/css/index.css"/>
</head>
<body>
<h1>component-2</h1>
<hr>
<div id="app">
    <!--<world here="China"></world>-->

    <world v-bind:here="message"></world><!-- 从父组件传值到here -->
</div>

<script>
    worldworld = {
        template: '<div>my here is {{here}}</div>',
//        props: ['here']
        props: {
            //基础类型检测('null'意思是人和类型都行)
            propA: Number,
            //多种类型
            propB: [String, Number],
            //必须且是字符串
            propC: {
                type: String,
                required: true
            },
            //数字,有默认值
            propD: {
                type: Number,
                default: 100
            },
            //数组/对象得默认值应当由一个工厂函数返回
            propE: {
                type: Object,
                default: function () {
                    return {message: 'hello'}
                }
            },
            //自定义验证函数
            propE: {
                validator: function (value) {
                    return value > 10
                }
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            message: 'usa'
        },
        components: {//这里有s,全局化的没有s
            "world": worldworld
        }
    })
</script>
</body>
</html>